/**
 * 拖拽系列生命周期
 */
import { defineEmits, onUnmounted } from "vue";
import { useConfig } from "@/stores/datav/useConfig";
import { IConfig } from "@/stores/datav/types";
import { PUT_RESIZE } from "@/components/viewEditor/typs/pubsubType";

export interface IDrapResize {
  activated: () => void;
  onDragStart: () => boolean;
  onDrag: (x: number, y: number) => boolean;
  dragging: (x: number, y: number) => void;
  dragstop: (x: number, y: number) => void;
  onResizeStart: () => boolean;
  onResize: (
    handle: string,
    x: number,
    y: number,
    width: number,
    height: number
  ) => boolean;
  resizing: (x: number, y: number, width: number, height: number) => void;
  resizestop: (x: number, y: number, width: number, height: number) => void;
  contextMenuHandle: (e: MouseEvent) => void;
}

export function useDragResize(
  props: {
    config: IConfig;
    id: string;
  },
  emits: (event: "context-menu-handle", data: object) => void,
  pubsub: any
): IDrapResize {
  let isDrag = false;
  let isResize = false;
  const config = useConfig();
  console.log(emits);
  // 修改元素大小开始 返回 true 为开始修改  false 为不允许修改
  const onResizeStart = () => {
    isResize = true;
    config.currentIndex = props.id;
    return true;
  };
  // 下一个元素大小值 返回 true 为允许修改  false 为不允许修改
  const onResize = (
    handle: string,
    x: number,
    y: number,
    width: number,
    height: number
  ) => {
    const offsetLeft = x - config.config[config.currentIndex].location.x;
    const offsetTop = y - config.config[config.currentIndex].location.y;
    const offsetWidth =
      width - config.config[config.currentIndex].location.width;
    const offsetHeight =
      height - config.config[config.currentIndex].location.height;
    config.checkedList.forEach((id: string) => {
      config.config[id].location.x += offsetLeft;
      config.config[id].location.y += offsetTop;
      config.config[id].location.width += offsetWidth;
      config.config[id].location.height += offsetHeight;
    });
    return true;
  };

  const resizing = (x: number, y: number, width: number, height: number) => {
    config.config[config.currentIndex].location.x = x;
    config.config[config.currentIndex].location.y = y;
    config.config[config.currentIndex].location.width = width;
    config.config[config.currentIndex].location.height = height;
  };
  const resizestop = (x: number, y: number, width: number, height: number) => {
    isResize = false;
    pubsub.publish(PUT_RESIZE, config.currentIndex);
  };
  /**
   * 拖拽开始
   *
   */
  const onDragStart = () => {
    isDrag = true;
    config.currentIndex = props.id;
    emits("context-menu-handle", {
      contentMenuX: 0,
      contentMenuY: 0,
      contentMenu: false,
      id: props.id,
    });
    return isDrag;
  };
  /**
   * 元素移动下一个的坐标位置
   * @param x 下一个x的值
   * @param y 下一个y的值
   */
  const onDrag = (x: number, y: number) => {
    const offsetLeft = x - config.config[config.currentIndex].location.x;
    const offsetTop = y - config.config[config.currentIndex].location.y;
    config.checkedList.forEach((id: string) => {
      config.config[id].location.x += offsetLeft;
      config.config[id].location.y += offsetTop;
    });
    return true;
  };
  // 推拽
  const dragging = (x: number, y: number) => {
    if (isDrag) {
      config.config[config.currentIndex].location.x = x;
      config.config[config.currentIndex].location.y = y;
    }
  };
  // 拖拽结束
  const dragstop = (x: number, y: number) => {
    isDrag = false;
  };

  const activated = () => {
    config.currentIndex = props.id;
  };

  const contextMenuHandle = (e: MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    emits("context-menu-handle", {
      contentMenuX: e.clientX,
      contentMenuY: e.clientY,
      contentMenu: true,
      id: props.id,
    });
  };
  // 组件销毁前
  onUnmounted(() => {
    emits("context-menu-handle", {
      contentMenuX: 0,
      contentMenuY: 0,
      contentMenu: false,
      id: "",
    });
  });
  return {
    activated,
    onResizeStart,
    onResize,
    resizing,
    resizestop,
    onDragStart,
    onDrag,
    dragging,
    dragstop,
    contextMenuHandle,
  };
}
